<template>
  <div class="preview-root">
    <div class="preview-background">
      <div class="preview-container">
        <div class="preview-content" ref="previewContent">
          <Header />
          <template v-for="(item, index) of previewData">
            <Slide
              :class="{ 'margin-bottom': item.isMarginBottom }"
              v-if="item.category === 'slide'"
              :Key="index"
              :data="{...item}"
            />
            <Navigation
              :class="{ 'margin-bottom': item.isMarginBottom }"
              v-if="item.category === 'navigation'"
              :Key="index"
              :data="{...item}"
            />
            <Coupon
              :class="{ 'margin-bottom': item.isMarginBottom }"
              v-if="item.category === 'coupon'"
              :Key="index"
              :data="{...item}"
            />
            <Recommend
              :class="{ 'margin-bottom': item.isMarginBottom }"
              v-if="item.category === 'recommend'"
              :Key="index"
              :data="{...item}"
            />
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCache } from '../decorate/common/'
import Header from './components/header'
import Slide from './components/slide'
import Navigation from './components/navigation'
import Coupon from './components/coupon'
import Recommend from './components/recommend'
export default {
  name: 'DecoratePreview',
  components: {
    Header,
    Slide,
    Navigation,
    Coupon,
    Recommend
  },
  data () {
    return {
      previewData: null
    }
  },
  created () {
    this.previewData = getCache('decoratePreivewData', true) || []
    console.log(JSON.parse(JSON.stringify(this.previewData)))
  }
}
</script>

<style lang="less" scoped>
.preview-root {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background-color: #f7f8fa;
  .preview-background {
    position: relative;
    overflow: hidden;
    width: 419px;
    height: 850px;
    margin: 50px auto;
    background-color: #c8c9cc;
    background: url("../decorate/assets/images/iphoneX.png") no-repeat center 0;
    background-size: 104%;
    .preview-container {
      position: absolute;
      top: 60px;
      left: 21px;
      right: 23px;
      bottom: 35px;
      background-color: #f2f3f5;
      overflow: hidden;
      .preview-content {
        position: relative;
        overflow-x: overlay;
        overflow-y: overlay;
        height: 100%;
        &::-webkit-scrollbar {
          display: none;
        }
        .margin-bottom {
          margin-bottom: 10px;
        }
      }
    }
  }
}
</style>